<template>
  <a-modal
    title="订单详情"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <template slot="footer">
      <div class="footerBox">
        <a-button type="primary">
          服务协议
        </a-button>
        <a-button type="primary">
          服务声明
        </a-button>
        <a-button type="primary">
          取 消
        </a-button>
      </div>
    </template>
    <div class="headCard">
      <div class="headCardText">
        <span>经销商名称：</span>
        <span>北京xxxx汽车销售服务有限公司</span>
      </div>
      <div class="headCardText">
        <span>机构代码：</span>
        <span>PHUWEY-110293787239</span>
      </div>
    </div>
    <a-form :form="form">
      <a-row>
        <a-col :md="24" >
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">基本信息</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">订单号：</span>
            <span class="dark">{{ mdl.orderId }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">服务合同号：</span>
            <span class="dark">{{ mdl.serviceContractNo }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">下单日期：</span>
            <span class="dark">{{ mdl.orderTime }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue"></div>
          <span class="lightColour">业务员姓名：</span>
          <span class="dark">{{ mdl.saleName }}</span>
        </a-col>
        <a-col :md="24" >
          <div class="title">
            <div class="titleRece"></div>
            <span class="titleText">车辆信息</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆组别：</span>
            <span class="dark">{{ mdl.saleName }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆组别：</span>
            <span class="dark">{{ mdl.carType }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆品牌：</span>
            <span class="dark">{{ mdl.carBrand }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">品牌型号：</span>
            <span class="dark">{{ mdl.brandModel }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车主姓名：</span>
            <span class="dark">{{ mdl.carName }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">身份证号：</span>
            <span class="dark">{{ mdl.idCard }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">手机号：</span>
            <span class="dark">{{ mdl.iphone }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">服务权益人姓名：</span>
            <span class="dark">{{ mdl.serviceStakeholders }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车牌号/发动机号：</span>
            <span class="dark">{{ mdl.carNumber }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车架号：</span>
            <span class="dark">{{ mdl.vinNo }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车险承保公司：</span>
            <span class="dark">{{ mdl.insuranceCarriers }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">车辆损失险保单号：</span>
            <span class="dark">{{ mdl.lossPolicy }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">保额：</span>
            <span class="dark">{{ mdl.insuredAmount }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">商业险起保日期：</span>
            <span class="dark">{{ mdl.insuranceStartdate }}</span>
          </div>
        </a-col>
        <a-col :md="24" >
          <div class="title">

            <div class="titleRece"></div>
            <span class="titleText">项目承保信息：</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">投保方案：</span>
            <span class="dark">{{ mdl.insuranceScheme }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">保险费：</span>
            <span class="dark">{{ mdl.insurancePremium }}</span>
          </div>
        </a-col>
        <a-col :md="12" >
          <div class="itemValue">
            <span class="lightColour">赔偿限额：</span>
            <span class="dark">{{ mdl.compensationLimit }}</span>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { saveSysBusinessInfo } from '@/api/system'
import pick from 'lodash.pick'
export default {
  name: 'SysBusinessInfoModal',
  props: {
  },
  components: {
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 10 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 14 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      datePicker: ''
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    add () {
      this.form.resetFields()
      this.edit({ id: 0 })
    },
    edit (record) {
      this.mdl = Object.assign(record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'compensationLimit', 'insurancePremium', 'insuranceScheme', 'insuranceStartdate', 'insuredAmount', 'lossPolicy', 'insuranceCarriers', 'engineNo', 'vinNo', 'carNumber', 'iphone', 'serviceStakeholders', 'idCard', 'carName', 'brandModel', 'carBrand', 'saleName', 'carType', 'serviceContractNo', 'orderTime', 'orderId', 'id'))
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          saveSysBusinessInfo({ ...values, id: this.mdl.id }).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-control{
    max-width: 180px;
    min-width: 140px;
  }
.headCard{
  height: 60px;
  padding: 12px;
  background: #BAE7FF;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 23px;
}
.title{
  display: flex;
  .titleRece{
    width: 2px;
    height: 16px;
    background: #227FE6;
    margin-right: 8px;
  }
  .titleText{
    font-family: "PingFangSC-Semibold";
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 600;
  }
}
.footerBox{
  display: flex;
  justify-content: center;
  padding: 0 30px 30px 30px;
}
/deep/ .ant-modal-footer{
  border: none;
}
.itemValue{
  margin: 9px 0;
.lightColour{
  font-family: "PingFangSC-Regular";
  font-size: 14px;
  color: #999999;
  text-align: right;
  font-weight: 400;
}
.dark{
  font-family: "PingFangSC-Regular";
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  line-height: 14px;
  font-weight: 400;
}
}

</style>
